<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-hr__sysuser">
            <div class="information-row" v-if="!modifyContent">
                <div class="information-left">
                    <div class="essential-information">
                        <div class="essential-information-left">
                            <el-descriptions :column="3" border>
                                <el-descriptions-item label="工号">
                                    {{ detailedInformation.eeNumber }}
                                </el-descriptions-item>
                                <el-descriptions-item label="姓名">
                                    {{ detailedInformation.realName }}
                                </el-descriptions-item>
                                <el-descriptions-item label="性别">
                                    {{ detailedInformation.gender == 0 ? "男" : "女" }}
                                </el-descriptions-item>
                                <el-descriptions-item label="民族">
                                    {{ detailedInformation.nation }}
                                </el-descriptions-item>
                                <el-descriptions-item label="籍贯">
                                    {{ detailedInformation.nativePlace }}
                                </el-descriptions-item>
                                <el-descriptions-item label="政治面貌">
                                    {{ detailedInformation.political ? detailedInformation.political : '' }}
                                </el-descriptions-item>
                                <el-descriptions-item label="婚姻状况">
                                    {{ '暂无字段' }}
                                </el-descriptions-item>
                                <el-descriptions-item label="邮箱">
                                    {{ detailedInformation.email ? detailedInformation.email : '' }}
                                </el-descriptions-item>
                                <el-descriptions-item label="联系电话">
                                    {{ detailedInformation.mobile }}
                                </el-descriptions-item>
                                <el-descriptions-item label="身份证号">
                                    {{ detailedInformation.idNumber }}
                                </el-descriptions-item>
                                <el-descriptions-item label="现住址" :span="2">
                                    {{ detailedInformation.address }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <div class="essential-information-piture">
                            <el-image style="width: 190px; height: 172px;margin-left: 10px;"
                                :src="detailedInformation.headUrl" :preview-src-list="srcList"
                                @click="pictureBtn(detailedInformation.headUrl)"
                                v-if="detailedInformation.headUrl"></el-image>
                            <el-image :src="require('@/assets/img/img.jpeg')"
                                style="width: 190px; height: 172px;margin-left: 10px;" v-else>暂无图片</el-image>
                        </div>
                    </div>
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="血型">
                            {{ detailedInformation.blood ? detailedInformation.blood : '' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="健康状况" :span="4">
                            {{ detailedInformation.healthy }}
                        </el-descriptions-item>
                        <el-descriptions-item label="学历">
                            {{ detailedInformation.education }}
                        </el-descriptions-item>
                        <el-descriptions-item label="毕业院校">
                            {{ detailedInformation.graduate }}
                        </el-descriptions-item>
                        <el-descriptions-item label="专业" :span="2">
                            {{ detailedInformation.major }}
                        </el-descriptions-item>
                        <el-descriptions-item label="开户行">
                            {{ detailedInformation.bank }}
                        </el-descriptions-item>
                        <el-descriptions-item label="银行卡号" :span="4">
                            {{ detailedInformation.bankCard }}
                        </el-descriptions-item>
                        <el-descriptions-item label="入职时间">
                            {{ (detailedInformation.entryTime || '').substr(0, 10) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="在职状态">
                            {{ detailedInformation.jobStatus }}
                        </el-descriptions-item>
                        <el-descriptions-item label="部门">
                            {{ detailedInformation.deptName }}
                        </el-descriptions-item>
                        <el-descriptions-item label="职务">
                            {{ detailedInformation.post }}
                        </el-descriptions-item>
                        <el-descriptions-item label="转正时间">
                            {{ detailedInformation.confirmDate ? (detailedInformation.confirmDate || '').substr(0, 10) : ''
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label="离职时间">
                            {{ detailedInformation.leftDate ? (detailedInformation.leftDate || '').substr(0, 10) : '' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="工龄">
                            {{ setSeniority(detailedInformation.entryTime) }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <h3>家庭成员</h3>
                    <el-table :data="familyData" style="width: 100%" border>
                        <el-table-column prop="relationship" label="与本人关系" align="center">
                        </el-table-column>
                        <el-table-column prop="realName" label="姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="age" label="年龄" align="center">
                        </el-table-column>
                        <el-table-column prop="location" label="工作单位/就读院校" align="center">
                        </el-table-column>
                        <el-table-column prop="occupation" label="职业" align="center">
                        </el-table-column>
                        <el-table-column prop="mobile" label="联系电话" align="center">
                        </el-table-column>
                    </el-table>
                    <h3>教育培训</h3>
                    <el-table :data="educationData" style="width: 100%" border>
                        <el-table-column prop="createDate" label="起" align="center">
                        </el-table-column>
                        <el-table-column prop="updateDate" label="止" align="center">
                        </el-table-column>
                        <el-table-column prop="location" label="学校或培训地点" align="center">
                        </el-table-column>
                        <el-table-column prop="content" label="专业/培训内容" align="center">
                        </el-table-column>
                    </el-table>
                    <h3>工作经历</h3>
                    <el-table :data="workExperienceData" style="width: 100%" border>
                        <el-table-column prop="createDate" label="起" align="center">
                        </el-table-column>
                        <el-table-column prop="updateDate" label="止" align="center">
                        </el-table-column>
                        <el-table-column prop="companyName" label="公司名称" align="center">
                        </el-table-column>
                        <el-table-column prop="department" label="所属部门" align="center">
                        </el-table-column>
                        <el-table-column prop="post" label="岗位" align="center">
                        </el-table-column>
                    </el-table>
                    <h3>合同情况</h3>
                    <el-table :data="contractData" style="width: 100%" border>
                        <el-table-column prop="start" label="起" align="center">
                        </el-table-column>
                        <el-table-column prop="end" label="止" align="center">
                        </el-table-column>
                        <el-table-column prop="contractTerm" label="合同年限" align="center">
                        </el-table-column>
                        <el-table-column prop="contractStatus" label="合同状态" align="center">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="information-right">
                    <div class="information-right-btn">
                        <el-button type="primary" @click="modifyInformation">修改</el-button>
                    </div>
                    <el-input placeholder="员工姓名" v-model="departmentName">
                        <el-button slot="append" icon="el-icon-search" @click="nameSeach(departmentName)"></el-button>
                    </el-input>
                    <el-tree :data="treeData" :props="{ label: 'name', children: 'children' }" @node-click="handleNodeClick"
                        node-key="id" :default-expanded-keys="[currentLivingId]"
                        :current-node-key="currentLivingId"></el-tree>
                </div>
            </div>
            <div class="information-left" v-if="modifyContent">
                <Modify ref="refBreedIntroduce" @editedContent="editedContent" />
            </div>
        </div>
    </el-card>
</template>
  
<script>
import Modify from './dossier-modify.vue';
export default {
    components: {
        Modify
    },
    data() {
        return {
            modifyContent: false,
            tableData: [],
            detailedInformation: {},
            srcList: [],
            currentLivingId: "",
            treeData: [],
            departmentName: "",
            familyData: [],  //家庭成员
            educationData: [], // 教育培训
            workExperienceData: [], // 工作经历
            contractData: [], // 合同情况
        };
    },
    mounted() {
        this.getFiles();//基本信息展示
        this.getFamily();//家庭成员
        this.getEducation();//教育培训
        this.getWorkExperience();//工作经历
        // this.getContractData();//合同情况
    },
    methods: {
        // 基本信息展示接口---------
        getFiles() {
            this.$http.get(`/sys/user/page`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.tableData = res.data.list;
                // 人员信息赋值和进页面显示第一个人员的信息
                // JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)  JSON.stringify()先将对象转换为字符串
                this.detailedInformation = JSON.parse(
                    JSON.stringify(this.tableData[0])
                );
                // 树-选中谁展开谁
                this.currentLivingId = this.detailedInformation.id;
                this.getTree();//获取树节点接口
            }).catch(() => { });
        },
        // 获取树节点接口-------
        getTree() {
            this.$http.get("/sys/dept/list").then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.treeData = res.data;
                this.treeData.forEach((item) => {
                    item.children.forEach((items) => {
                        items.children.forEach((itemss) => {
                            this.tableData.forEach((peo) => {
                                if (itemss.id == peo.deptId) {
                                    peo.name = peo.realName;
                                    itemss.children.push(peo);
                                }
                            });
                        });
                    });
                });
            }).catch(() => { });
        },
        //家庭成员接口--------
        getFamily() {
            this.$http.get("/hr/sysusermembers/page").then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                console.log('家庭成员内容', res.data);
                this.familyData = res.data.list
            })
        },
        // 教育培训接口-----
        getEducation() {
            this.$http.get("/hr/sysusereducation/page").then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                console.log('教育培训内容', res.data);
                this.educationData = res.data.list
            })
        },
        // 工作经历接口--------
        getWorkExperience() {
            this.$http.get("/hr/sysuserjob/page").then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                console.log('工作经历内容', res.data);
                this.workExperienceData = res.data.list;
            })
        },
        //合同情况接口-------
        getContractData() {
            this.$http.get("").then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                console.log('合同情况内容', res);
            })
        },
        // 个人照片-预览
        pictureBtn(url) {
            this.srcList.push(url);
        },
        // 选中树的节点
        handleNodeClick(data, node, prop) {
            // 人员才有的字段
            if (data.username) {
                this.detailedInformation = JSON.parse(JSON.stringify(data));
            }
        },
        // 名字搜索
        nameSeach(name) {
            this.treeData.forEach((it) => {
                it.children.forEach((its) => {
                    its.children.forEach((item) => {
                        if (item.children.length > 0) {
                            item.children.forEach((items) => {
                                if (items.name == name) {
                                    this.currentLivingId = items.deptId
                                }
                            })
                        }
                    })
                })
            })
        },
        // 计算工龄
        setSeniority(age) {
            if (age) {
                var EndTime = new Date(age);
                var NowTime = new Date();

                var year = NowTime.getFullYear() - EndTime.getFullYear();
                var month = NowTime.getMonth() - EndTime.getMonth();
                var day = NowTime.getDate() - EndTime.getDate();

                if (year < 0 || EndTime.getTime() > NowTime.getTime()) {
                    return "暂未入职"
                } else if (year > 0 && month == 0 && day == 0) {
                    return year + "年"
                } else if (year > 0 && month == 0 && day > 0) {
                    return year + "年" + day + "天"
                } else if (year > 0 && month > 0 && day > 0) {
                    return year + "年" + month + "个月" + day + "天"
                } else if (year == 0 && month > 0 && day > 0) {
                    return month + "个月" + day + "天"
                } else if (year == 0 && month > 0 && day == 0) {
                    return month + "个月"
                } else if (year == 0 && month == 0 && day >= 0) {
                    return day + "天"
                }
            }
        },
        // 修改------赋值
        modifyInformation() {
            this.modifyContent = true
            this.$nextTick(() => {
                // 基本信息
                for (let key in this.$refs.refBreedIntroduce.dataForm) {
                    if (this.detailedInformation && this.detailedInformation.hasOwnProperty(key)) {
                        this.$refs.refBreedIntroduce.dataForm[key] = this.detailedInformation[key]
                        this.$refs.refBreedIntroduce.dataForm['gender'] = this.detailedInformation['gender'].toString()
                        this.$refs.refBreedIntroduce.dataForm['id'] = this.detailedInformation['id']
                    }
                }
                // 家庭成员
                if (this.familyData.length > 0) {
                    this.$refs.refBreedIntroduce.familyMembers = this.familyData
                }
                // 教育培训   
                if (this.educationData.length > 0) {
                    this.$refs.refBreedIntroduce.educationTraining = this.educationData
                }
                // 工作经历
                if (this.workExperienceData.length > 0) {
                    this.$refs.refBreedIntroduce.workExperience = this.workExperienceData
                }
                // 合同情况
                if (this.contractData.length > 0) {
                    this.$refs.refBreedIntroduce.contractData = this.contractData
                }
            })
        },
        editedContent() {
            this.modifyContent = false;
            this.getFiles();//刷新
        }
    },
};
</script>
<style lang="scss" scoped>
.information-row {
    display: flex;
}

.information-left {
    width: 80%;
}

.information-right {
    width: 20%;
    margin-left: 20px;

    .information-right-btn {
        text-align: right;
        margin-bottom: 10px;
    }

    .el-tree {
        margin-top: 20px;
    }

    .el-tree-node__label {
        font-size: 20px;
        color: blue;
    }

    .el-tree-node__content {
        &:hover {
            background: #89c2f7;
        }
    }
}

.essential-information {
    display: flex;
    margin-bottom: 0px !important;
}

.essential-information-left {
    width: 80%;
}
</style>
  